<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script th:src="@{/static/js/vue.js}"></script>
    <script th:src="@{/static/js/axios.js}"></script>
    <script th:src="@{/static/elementui/index.js}"></script>
    <link rel="stylesheet" th:href="@{/static/elementui/index.css}">

</head>
<body>
<div id="app">

    <!--<el-form :inline="true" :model="page" class="demo-form-inline">-->
        <!--<el-form-item label="车牌号">-->
            <!--<el-input v-model="page.plate" placeholder="车牌号"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="ETC卡号">-->
            <!--<el-input v-model="page.card" placeholder="ETC卡号"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item>-->
            <!--<el-button type="primary" @click="initData(page.currentPage=1)">查询</el-button>-->
        <!--</el-form-item>-->
    <!--</el-form>-->

    <el-button type="primary" @click="handleAdd(user)">添加部门</el-button>
    <el-button type="primary" @click="zhiwuadd">添加职位</el-button>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>

        <el-table-column
                prop="name"
                label="职位">
        </el-table-column>

        <el-table-column label="所属部门" align="center">
            <template slot-scope="scope">
                <span>{{ scope.row.sector.name}}</span>
            </template>
        </el-table-column>

        <el-table-column label="建立时间" align="center">
            <template slot-scope="scope">
                <span>{{ scope.row.sector.time}}</span>
            </template>
        </el-table-column>
        <!--<el-table-column-->
                <!--prop="birth"-->
                <!--label="出生日期">-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
                <!--prop="time"-->
                <!--label="入职时间">-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
                <!--prop="xueli"-->
                <!--label="学历">-->
        <!--</el-table-column>-->
        <!--<el-table-column label="职位" align="center">-->
            <!--<template slot-scope="scope">-->
                <!--<span>{{ scope.row.dutyList.name}}</span>-->
            <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
                <!--prop="address"-->
                <!--label="地址">-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
                <!--prop="phone"-->
                <!--label="电话">-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
                <!--prop="sos"-->
                <!--label="紧急联系人">-->
        <!--</el-table-column>-->
        <!--<el-table-column label="所属部门" align="center">-->
            <!--<template slot-scope="scope">-->
                <!--<span>{{ scope.row.sectorList.name}}</span>-->
            <!--</template>-->
        <!--</el-table-column>-->

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button

                           @click="handleEdit(scope.row)">编辑</el-button>
                <el-button

                           type="danger"
                           @click="handleDelete(scope.row)">删除</el-button>

            </template>
        </el-table-column>

    </el-table>

    <!--分页-->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
        </el-pagination>
    </div>

    <!--添加职位-->
    <el-dialog :title="title" :visible.sync="dialogFormVisiblezhiwuadd">
        <el-form :model="formData" :inline="true">
            <el-form-item label="职位名称">
                <el-input v-model="formData.name" autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item label="所属部门">
                <el-select v-model="formData.sid" placeholder="请选择部门">
                    <el-option label="请选择" value=""></el-option>
                    <el-option v-for="s in list" :label="s.name" :value="s.id"></el-option>

                </el-select>
            </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisiblezhiwuadd = false">取 消</el-button>
            <el-button type="primary" @click="zhiadd()">确 定</el-button>
        </div>
    </el-dialog>

    <!--添加-->

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="formData" :inline="true">
            <el-form-item label="部门名称">
                <el-input v-model="formData.name" autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item label="建立时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formData.time" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 编辑标签弹层 -->
    <div class="add-form">
        <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
            <el-form :model="formData" :inline="true">
                <el-form-item label="职位名称">
                    <el-input v-model="formData.name" autocomplete="off"></el-input>
                </el-form-item>


                <el-form-item label="所属部门">
                    <el-select v-model="formData.sid" placeholder="请选择部门">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="s in list" :label="s.name" :value="s.id"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible4Edit = false">取 消</el-button>
                <el-button type="primary" @click="edit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>




</div>
<script th:inline="javascript">
    new Vue({
        el:'#app',
        data:{
            List:[],
            list:[],
            tableData:[],
            page:{
                currentPage:1,
                pageSize:2,
                total:20
            },
            title:'',
            dialogFormVisible:false,
            dialogFormVisible4Edit:false,
            dialogFormVisiblezhiwuadd:false,
            formData:{},
            username:'',
            user:[[${user}]]
        },
        methods:{
            findbumen(){
                axios.post("/employee/findbu").then(res=>{
                    this.list=res.data;
                })
            },
            zhiadd(){
        axios.post("/sector/zhiwuadd",this.formData).then(res=>{
            this.initData();
            this.dialogFormVisiblezhiwuadd=false;
        })
    },
            findzhiwei(){
                axios.post("/employee/findzhi").then(res=>{
                    this.List=res.data;
                })
            },
            findbumen(){
                axios.post("/employee/findbu").then(res=>{
                    this.list=res.data;
                })
            },
            initData(){
                axios.post("/sector/findPage").then(res=>{
                    this.tableData=res.data;
                    // this.page.total=res.data.total;
                })
            },
            handleEdit(row){
                this.title='编辑信息';
                this.findbumen();
                this.dialogFormVisible4Edit=true;
                this.formData=row;
                // this.username=this.user.username;
                // this.formData.userId=this.user.userId;
            },
            handleDelete(row){
                this.$confirm("是否删除","提示",{type:'warning'}).then(res=>{
                    axios.post("/sector/del?id="+row.id).then(res=>{
                            this.initData();
                    })
                }).catch(()=>{
                    this.$message({
                        message:'取消操作',
                        type:'info'
                    })
                })

            },
            handleAdd(){
                this.title='添加部门';
                this.formData={};
                this.dialogFormVisible=true;

            },
            zhiwuadd(){
               this.title='添加职位';
                this.formData={};
               this.dialogFormVisiblezhiwuadd=true;

             },
            edit(){
                axios.post("/sector/update",this.formData).then(res=>{
                    this.initData();
                    this.dialogFormVisible4Edit=false;
                })
            },
            getMoney(row){
                axios.post(`/etc/getMoney?id=${row.id}`).then(res=>{
                    if (res.data.code==0){
                        this.$message({
                            message:res.data.message,
                            type:'success'
                        })
                    } else {
                        this.$message.error(res.data.message)
                    }
                })

            },
            save(){
                axios.post("/sector/add",this.formData).then(res=>{
                        this.initData();
                        this.dialogFormVisible=false;
                })
            },
            handleSizeChange(pageSize){
                this.page.pageSize=pageSize;
                this.initData()
            },
            handleCurrentChange(currentPage){
                this.page.currentPage=currentPage;
                this.initData()
            }
        },
        created(){
            this.initData();
            this.findzhiwei();
            this.findbumen();
        }
    })
</script>
</body>
</html>